<template>
  <div class="info">
    <div class="basic flex con-bg">
      <img src="http://via.placeholder.com/150x150" alt="">
      <div class="flex-1">
        <div class="name gfc-white">名字名字</div>
        <div class="title gfc-grey1">大师001</div>
        <div class="sex"></div>
        <div class="btn align-c clearfix gfc-white">
          <div class="pull-left">8笔交易</div>
          <div class="pull-left">关注</div>
        </div>
      </div>
    </div>
    <div class="data flex align-c gfc-grey1 con-bg">
      <div class="flex-1">
        <div class="title">收益率</div>
        <div class="con gfc-white">53.54%</div>
      </div>
      <div class="flex-1 ml">
        <div class="title">盈亏</div>
        <div class="con gfc-white">$5000</div>
      </div>
      <div class="flex-1">
        <div class="title">跟随者</div>
        <div class="con gfc-white">100人</div>
      </div>
    </div>
    <div class="medal con-bg">
      <div class="flex">
        <div class="flex-1">
          <div class="badge1"></div>
        </div>
        <div class="flex-1">
          <div class="badge2"></div>
        </div>
        <div class="flex-1">
          <div class="badge3"></div>
        </div>
        <div class="flex-1">
          <div class="badge4"></div>
        </div>
      </div>
      <div class="progress"><p></p></div>
    </div>
    <div class="tabs flex gfc-grey1 align-c con-bg">
      <div class="flex-1 order" :class="{active: activeIndex == 0, 'gfc-white': activeIndex == 0}">
        <div class="icon"></div>
        <div class="text">订单动态</div>
      </div>
      <div class="flex-1 task" :class="{active: activeIndex == 1, 'gfc-white': activeIndex == 1}">
        <div class="icon"></div>
        <div class="text">勋章任务</div>
      </div>
      <div class="flex-1 statistics">
        <div class="icon"></div>
        <div class="text">交易统计</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['activeIndex']
  }
</script>

<style scoped>
  /*大师个人信息*/
  .info {
    font-size: .16rem;
  }

  .basic, .data {
    border-bottom: 1px solid #333A42;
  }

  .basic {
    padding: .2rem .18rem;
    position: relative;
  }

  .basic img {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    margin-right: .18rem;
  }

  .basic .title {
    margin: .15rem 0;
  }

  .basic .sex {
    width: .13rem;
    height: .13rem;
    background: url("../../assets/man.png") no-repeat 0/100% 100%;
  }

  .basic .btn {
    position: absolute;
    right: .18rem;
    bottom: .2rem;
  }

  .basic .btn > div {
    min-width: .8rem;
    height: .3rem;
    line-height: .3rem;
    padding: 0 .1rem;
    background: #F25E44;
    border-radius: .04rem;
    margin-left: .18rem;
  }

  .data, .medal {
    padding: .2rem 0;
  }

  .data .ml {
    border-left: 1px solid #333A42;;
    border-right: 1px solid #333A42;;
  }

  .data .con {
    font-size: .2rem;
    margin-top: .19rem;
  }

  .medal {
    margin-bottom: .1rem;
  }

  .medal .flex-1 div {
    width: .62rem;
    height: .6rem;
    margin: 0 auto;
  }

  .badge1 {
    background: url("../../assets/badge1.png") no-repeat 0/100% 100%;
  }

  .badge2 {
    background: url("../../assets/badge2.png") no-repeat 0/100% 100%;
  }

  .badge3 {
    background: url("../../assets/badge3.png") no-repeat 0/100% 100%;
  }

  .badge4 {
    background: url("../../assets/badge4.png") no-repeat 0/100% 100%;
  }

  .progress, .progress p {
    height: .02rem;
    border-radius: .01rem;
    background: #D8D8D8;
  }

  .progress {
    margin: .1rem .18rem 0;
  }

  .progress p {
    width: .2rem;
    background: #F25E44;
  }

  .tabs > div {
    height: .95rem;
    padding-top: .2rem;
  }

  .tabs > div.active {
    border-bottom: 1px solid #F25E44;
  }

  .tabs .icon {
    width: .22rem;
    height: .22rem;
    margin: 0 auto .18rem;
  }

  .tabs .order .icon {
    background: url("../../assets/order.png") no-repeat 0/100% 100%;
  }

  .tabs .task .icon {
    background: url("../../assets/task.png") no-repeat 0/100% 100%;
  }

  .tabs .statistics .icon {
    background: url("../../assets/statistics.png") no-repeat 0/100% 100%;
  }
</style>
